<template>
  <div>
    <div class="header">
      <span>答题总数</span>
      <i class="el-icon-warning"></i>
    </div>
    <div class="body" ref="myDiv">202,022</div>

    <hr />
    <div class="footer">
      <span>日答题数量</span>
      <span>12123</span>
    </div>
  </div>
</template>

<script>
var echarts = require("echarts");
export default {
  name: "Direction",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv); // 得到图表实例
    myChart.setOption({
      title: {
        // text: "基础雷达图",
      },
      tooltip: {},
      legend: {
        data: ["预算分配（Allocated Budget）", "实际开销（Actual Spending）"],
      },
      radar: {
        // shape: 'circle',
        radius: "55%",
        name: {
          textStyle: {
            color: "#999",
            // backgroundColor: "#999",
            borderRadius: 1,
            padding: [1, 0],
          },
        },
        splitArea: {
          areaStyle: {
            color: "rgba(127,95,132,.3)",
            opacity: 1,
            shadowBlur: 45,
            shadowColor: "rgba(0,0,0,.5)",
            shadowOffsetX: 0,
            shadowOffsetY: 15,
          },
        },
        // 每个区域的最高值
        indicator: [
          { name: "项目相关", max: 100 },
          { name: "理论基础", max: 100 },
          { name: "高阶技术", max: 100 },
          { name: "基础知识", max: 100 },
          { name: "高阶知识", max: 100 },
        ],
      },
      series: [
        {
          //   name: "预算 vs 开销（Budget vs spending）",
          type: "radar",
          symbolSize: 0,
          areaStyle: {
            normal: {
              shadowBlur: 13,
              shadowColor: "rgba(0,0,0,.2)",
              shadowOffsetX: 0,
              shadowOffsetY: 10,
              opacity: 1,
            },
          },
          data: [
            {
              value: [10, 1, 100, 5, 100, 0],
              name: "冬冬",
              areaStyle: {
                normal: {
                  color: "#63c2ff", // 选择区域颜色
                },
              },
            },
            {
              value: [50, 50, 50, 50, 50, 10],
              name: "泰泰",
              areaStyle: {
                normal: {
                  color: "#32dadd", // 选择区域颜色
                },
              },
            },
            {
              value: [70, 40, 50, 50, 50, 10],
              name: "露露",
              areaStyle: {
                normal: {
                  color: "#c8b2f4", // 选择区域颜色
                },
              },
            },
            {
              value: [50, 30, 10, 50, 50, 10],
              name: "波波",
              areaStyle: {
                normal: {
                  color: "#5ab1ef", // 选择区域颜色
                },
              },
            },
          ],
        },
      ],
    });
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  color: #97a8be;
  height: 25px;
  span {
    font-size: 14px;
  }
}
.body {
  font-size: 30px;
  height: 160px;
  line-height: 140px;
  padding-left: 20px;
}

hr {
  border-top: 1px solid #e8e8e8;
  margin: 0 0 10px 0;
}
.footer span {
  margin-right: 8px;
}
</style>
